<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui树形表格2.x演示</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="demo.css?v=20191226">
    <style>
        thead td .layui-icon {
            vertical-align: middle;
        }

        [lay-date] {
            background-image: url(icon_date.png);
            background-position: right center;
            background-repeat: no-repeat;
            padding-right: 28px;
            cursor: pointer;
        }
    </style>
</head>
<body class="page-no-scroll">
<div class="page-loading">
    <div class="ball-loader sm">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<div class="page-wrapper">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>Layui树形表格2.x演示</legend>
    </fieldset>
    <div class="layui-btn-container">
        <a href="edit.html" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe65c;</i>返回
        </a>
        <button class="layui-btn layui-btn-sm layui-btn-primary">演示复杂单元格编辑的实现</button>
    </div>

    <table id="demoTreeTable1"></table>
</div>

<div class="right-desc">
    <div class="layui-text desc-item">
        treeTable时隔一年进行了彻底重构，不再基于数据表格table，从零开始，
        实现了数据表格的大部分功能，在使用方法上与数据表格一致，
        并且支持懒加载、复选框联动、折叠状态记忆等功能，
        <a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
    </div>
    <div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
        <img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
        <div style="padding: 5px 10px;">
            EasyWeb管理系统模板
            <a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="demoTreeTableBar1">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="demoTreeTableState1">
    <input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
</script>

<!-- 表格下拉框列 -->
<script type="text/html" id="demoTreeTableSel">
    <select data-id="{{d.id}}" lay-filter="demoSel">
        <option value="">请选择</option>
        <option value="0" {{d.state==0?'selected':''}}>研发部</option>
        <option value="1" {{d.state==1?'selected':''}}>测试部</option>
        <option value="2" {{d.state==2?'selected':''}}>市场部</option>
    </select>
</script>

<script src="../layui/layui.js"></script>
<script>
    layui.config({
        base: '../'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use(['layer', 'util', 'laydate', 'form', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;
        var form = layui.form;
        var treeTable = layui.treeTable;

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTable1',
            tree: {
                iconIndex: 1
            },
            cols: [
                {type: 'numbers'},
                {field: 'id', title: 'ID'},
                {
                    field: 'name',
                    title: 'name<i class="layui-icon">&#xe642;</i>',
                    width: 160,
                    edit: 'text',
                    class: 'break-all'
                },
                {
                    title: '创建时间', width: 180, templet: function (d) {
                        return '<div lay-date="' + d.id + '">' + util.toDateString(d.createTime, 'yyyy-MM-dd') + '</div>';
                    }
                },
                {templet: '#demoTreeTableSel', title: '部门', width: 140, singleLine: false, class: 'pd-tb-0'},
                {templet: '#demoTreeTableState1', title: '状态', width: 100, class: 'pd-tb-0'},
                {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
            ],
            reqData: function (data, callback) {
                var url = '../../json/list';
                url += ((data ? ('_' + data.id) : '') + '.json');
                $.get(url, function (res) {
                    callback(res.data);
                    renderLayDate();  // 渲染laydate
                });
            },
            style: 'margin-top:0;'
        });
        $('#demoTreeTable1+div .ew-tree-table-box').css('overflow', 'visible');

        // 监听单元格编辑事件
        treeTable.on('edit(demoTreeTable1)', function (obj) {
            console.log(obj);
            layer.msg('修改了字段，当前行ID：' + obj.data.id);
        });

        // 渲染laydate
        function renderLayDate() {
            $('[lay-date]').each(function () {
                laydate.render({
                    elem: this,
                    trigger: 'click',
                    done: function (value, date, endDate) {
                        var id = $(this.elem).attr('lay-date');
                        layer.msg('日期' + value + '，当前行ID：' + id);
                    }
                });
            });
        }

        // 监听select选择事件
        form.on('select(demoSel)', function (data) {
            console.log(data.value); // 得到被选中的值
            var id = $(data.elem).data('id');
            var title = $(data.elem).find('option[value="' + data.value + '"]').text();
            layer.msg('选择了' + title + '，当前行ID：' + id);
        });

        // 监听switch开关切换事件
        form.on('switch(ckState)', function (data) {
            var checked = data.elem.checked;
            var id = data.value;
            layer.msg('switch' + (checked ? '开' : '关') + '，当前行ID：' + id);
        });

        // 移除loading
        setTimeout(function () {
            $('body').children('.page-loading').hide();
            $('body').removeClass('page-no-scroll');
        }, 100);

    });
</script>
</body>
</html>